$size: 3px;

.logo {
  position: relative;
  width: $size * 12;
  height: $size * 12;
}

.line-vertical {
  position: absolute;
  top: 0;
  height: $size * 12;
  width: $size;
}

.square {
  position: absolute;
  top: 0;
  left: $size * 5;
  width: $size;
  height: $size;
}

.line-vertical-one {
  left: $size;
  background-color: var(--color-primary);
}

.line-vertical-two {
  left: $size * 3;
  background-color: var(--color-secondary);
}

.line-vertical-three {
  left: $size * 5;
  background-color: var(--color-tertiary);
}

.line-horizontal {
  position: absolute;
  left: 0px;
  height: $size;
  width: $size * 12;
}

.line-horizontal-one {
  top: $size * 10;
  background-color: var(--color-primary);
}

.line-horizontal-two {
  top: $size * 8;
  background-color: var(--color-secondary);
}

.line-horizontal-three {
  top: $size * 6;
  background-color: var(--color-tertiary);
}

.line-horizontal-one::after {
  content: '';
  position: absolute;
  top: 0;
  left: $size * 3;
  width: $size;
  height: $size;
  background-color: #003cd2;
}

.line-horizontal-one::before {
  content: '';
  position: absolute;
  top: 0;
  left: $size;
  width: $size;
  height: $size;
  background-color: #0000d1;
}

.line-horizontal-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: $size;
  width: $size;
  height: $size;
  background-color: #003cd2;
}

.line-horizontal-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: $size;
  width: $size;
  height: $size;
  background-color: #003cd2;
}

.line-horizontal-two::after {
  content: '';
  position: absolute;
  top: 0;
  left: $size * 3;
  width: $size;
  height: $size;
  background-color: #0855f4;
}

.line-horizontal-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: $size * 3;
  width: $size;
  height: $size;
  background-color: #0078e3;
}

.line-horizontal-one .square {
  background-color: #003cd2;
}

.line-horizontal-two .square {
  background-color: #0078e3;
}

.line-horizontal-three .square {
  background-color: #00a4d2;
}
